<template>
  <div>
    <!-- 按钮 -->
    <el-button type="primary" size="mini" icon="el-icon-plus" @click="isShowAdd = true">新增角色</el-button>

    <!-- 表格 -->
    <el-table :data="roleList" border stripe>
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="角色名" prop="name"></el-table-column>
      <el-table-column label="角色描述" prop="description"></el-table-column>
      <el-table-column label="操作" width="180px">
        <template v-slot="{ row }">
          <div class="center-item">
            <el-link type="primary" @click="ShowPer(row.id)">分配权限</el-link>
            <el-link type="primary" @click="showEdit(row.id)">修改</el-link>
            <el-link type="primary" @click="remove(row.id)">删除</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page.sync="q.page"
      :page-size="q.pagesize"
      layout="total, prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    >
    </el-pagination>

    <!-- 3. 添加角色的子组件 -->
    <!-- 在绑定属性的时候，建议把小驼峰的属性名，改造为“连字符”的形式使用 -->
    <AddRole :show-dialog.sync="isShowAdd" @reload="initRoleList" />
    <EditRole :id.sync="id" :show-dialog.sync="isShowEdit" @reload="initRoleList"> </EditRole>
    <AssignPer :id.sync="roleId" :show-dialog.sync="isShowPer"> </AssignPer>
  </div>
</template>

<script>
// 按需导入 API
import AssignPer from './AssignPer.vue'
import { getRoleListAPI, delRoleAPI } from '@/api/role.js'
// 1. 导入子组件
import AddRole from './AddRole.vue'
import EditRole from './EditRole.vue'

export default {
  name: 'RoleList',
  // 2. 注册子组件
  components: {
    AddRole,
    EditRole,
    AssignPer
  },
  data() {
    return {
      // 查询参数对象
      q: {
        // 页码值
        page: 1,
        // 每页展示几条数据
        pagesize: 2
      },
      // 总数据条数，用来实现分页的
      total: 0,
      // 请求回来的角色列表数据
      roleList: [],
      // 控制是否展示添加的对话框
      isShowAdd: false,
      isShowEdit: false,
      id: '',
      isShowDel: false,
      isShowPer: false,
      roleId: ''
    }
  },
  created() {
    this.initRoleList()
  },
  methods: {
    // 查询角色的列表数据
    async initRoleList() {
      const result = await getRoleListAPI(this.q)
      this.total = result.data.total
      this.roleList = result.data.rows
    },
    // 监听页码值的改变
    handleCurrentChange(newPage) {
      this.q.page = newPage
      this.initRoleList()
    },
    showEdit(id) {
      // console.log(id)
      this.id = id
      this.isShowEdit = true
    },
    async remove(id) {
      const result = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (result !== 'confirm') return
      await delRoleAPI(id)
      this.$message.success('删除成功')
      // 每次接口调用成功，要判断是否要进行页码值的回退操作
      if (this.roleList.length === 1 && this.q.page > 1) {
        this.q.page--
      }
      this.initRoleList()
    },
    ShowPer(id) {
      this.isShowPer = true
      this.roleId = id
    }
  }
}
</script>

<style lang="scss" scoped></style>
